<template>
  <p>App</p>
  <!-- 
    插槽 slot

      1. 默认插槽

      2. 具名插槽

      3. 作用域插槽
   -->
  <A>
    <!-- 
      子组件写成双标签
      标签内部的内容，就是通信的标签数据
    -->
    <div>111</div>
    <p>222</p>
    <span>333</span>
  </A>

  <!-- <B>
    <div>内容111~~~</div>

    <template v-slot:header>
      <header>头部</header>
    </template>

    <div>内容222~~~</div>

    <template #footer><footer>底部</footer></template>

    <div>内容333~~~</div>
  </B> -->

  <B>
    <!-- 
      默认一定会将最重要的内容使用默认插槽，如果有结构要渲染不同位置，在考虑具名插槽
     -->
    <template v-slot:header>
      <header>头部</header>
    </template>

    <template #footer><footer>底部</footer></template>

    <div>内容111~~~</div>
    <div>内容222~~~</div>
    <div>内容333~~~</div>
  </B>

  <C>
    <!-- 默认插槽其实有名字，名字叫default，这个名字省略不写 -->
    <!-- <template v-slot:default="scoped">
      <div>默认插槽使用作用域插槽数据：{{ scoped.count }}</div>
    </template> -->
    <!-- <template v-slot:default="{ count }">
      <div>默认插槽使用作用域插槽数据：{{ count }}</div>
    </template> -->
    <template #default="{ count }">
      <div>默认插槽使用作用域插槽数据：{{ count }}</div>
    </template>

    <template #footer="{ count }">
      <div>具名插槽使用作用域插槽数据：{{ count }}</div>
    </template>
  </C>
</template>

<script lang="ts">
import A from "./A.vue";
import B from "./B.vue";
import C from "./C.vue";

export default {
  name: "App",
  components: { A, B, C },
};
</script>
